<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nth-of-type</title>
		
		<style>
			.section1>p:nth-child(3) {
				color: #ff0000;
			}

			.section2>p:nth-of-type(3) {
				color: #ff0000;
			}

		</style>
	</head>
	<body>
		<h1>:nth-of-type</h1>
		<ul>
			<li>用法和nth-child差不多，同样是表示第几个子孩子</li>
			<li>但是要求必须符合前面选择器的要求</li>
			<li>用法：E:nth-of-type(n)</li>
		</ul>
		<h2>.section1>p:nth-child(3)</h2>
		<section class="section1">
			<p>p1</p>
			<div>div2</div>
			<p>p3</p>
			<div>div4</div>
			<p>p5</p>
		</section>
		<h2>.section2>p:nth-of-type(3)</h2>
		<section class="section2">
			<p>p1</p>
			<div>div2</div>
			<p>p3</p>
			<div>div4</div>
			<p>p5</p>
		</section>
	</body>
</html>
